<template>
  <div>
    <div class="content1">
      <!-- 六个点击事件图标 -->

      <view>
        <u-image class="image1" :showLoading="true" :src="src1" width="80px" height="80px" @click="one"></u-image>
      </view>

      <view>
        <u-image class="image2" :showLoading="true" :src="src2" width="80px" height="80px" @click="two"></u-image>
      </view>

      <view>
        <u-image class="image3" :showLoading="true" :src="src3" width="80px" height="80px" @click="three"></u-image>
      </view>
    </div>

    <div class="content2">
      <view>
        <u-image class="image4" :showLoading="true" :src="src4" width="80px" height="80px" @click="four"></u-image>
      </view>

      <view>
        <u-image class="image5" :showLoading="true" :src="src5" width="80px" height="80px" @click="five"></u-image>
      </view>

      <view>
        <u-image class="image6" :showLoading="true" :src="src6" width="80px" height="80px" @click="six"></u-image>
      </view>
    </div>
    <div class="content3">
      <view class="button" @click="btn">
        <button>点击进入订单大厅</button>
      </view>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        src1: '/static/complaint.jpg',
        src2: '/static/reminder.jpg',
        src3: '/static/suspend.jpg',
        src4: '/static/timeout_reservation.jpg',
        src5: '/static/abnormal_reservation.jpg',
        src6: '/static/timeout_service.jpg',
      }
    },
    methods: {
      one() {
        uni.navigateTo({
          url: '/pages/complaint/complaint',
        })
      },
      two() {
        uni.navigateTo({
          url: '/pages/reminder/reminder',
        })
      },
      three() {
        uni.navigateTo({
          url: '/pages/suspend/suspend',
        })
      },
      four() {
        uni.navigateTo({
          url: '/pages/timeout_reservation/timeout_reservation',
        })
      },
      five() {
        uni.navigateTo({
          url: '/pages/abnormal_reservation/abnormal_reservation',
        })
      },
      six() {
        uni.navigateTo({
          url: '/pages/timeout_service/timeout_service',
        })
      },
      btn() {
        uni.navigateTo({
          url: '/pages/Order-Hall/Order-Hall',
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content1 {
    display: flex;
    flex-direction: row;
  }
  .content2 {
    padding-top: 30px;
    display: flex;
    flex-direction: row;
  }
  .button {
    background-color: aquamarine;
  }
  .content3 {
    padding-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .image1 {
    padding-left: 40px;
  }

  .image2 {
    padding-top: 0px;
    padding-left: 30px;
  }
  .image3 {
    padding-top: 0px;
    padding-left: 30px;
  }
  .image4 {
    padding-top: 0px;
    padding-left: 40px;
  }
  .image5 {
    padding-top: 0px;
    padding-left: 30px;
  }
  .image6 {
    padding-top: 0px;
    padding-left: 30px;
  }
</style>
